/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-07-14 13:36:06
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-08-02 11:39:22
 * @FilePath: /legion-iot/src/pages/system/devices/columns.js
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { Image, Popover, Space, Switch } from "antd";
import { EyeFilled, QrcodeOutlined } from "@ant-design/icons";
import QRCodeStyling from "qr-code-styling";

const qrCode = new QRCodeStyling({
  width: 128,
  height: 128,
  dotsOptions: {
    color: "#4267b2",
    type: "rounded"
  },
  imageOptions: {
    crossOrigin: "anonymous",
    margin: 20
  }
});

function getcolumns(enable) {
  return {
    columns: [
      {
        title: "设备编码",
        dataIndex: "code",
        key: "code",
        formItemProps: { rules: [{ required: true, message: "此项为必填项" }] },
      },
      {
        title: "设备名称",
        dataIndex: "name",
        key: "name",
        formItemProps: { rules: [{ required: true, message: "此项为必填项" }] },
      },
      {
        title: "设备类型",
        dataIndex: "device_type",
        key: "device_type",
        valueType: "select",
        options: {
          path: "/device/device_types",
          params: {},
          tlabel: "name",
          tvalue: "type",
        },
      },
      {
        title: "分区数量",
        dataIndex: "part_num",
        key: "part_num",
        valueType: "digit",
        fieldProps: {
          min: 1,
          max: 4,
          precision: 0
        },
        search: false
      },
      {
        title: "小区",
        dataIndex: "village_id",
        key: "village_id",
        valueType: "select",
        options: {
          path: "/village",
          params: { is_all: 1 },
        },
      },
      {
        title: "楼栋",
        dataIndex: "build_number",
        key: "build_number",
        valueType: "digit",
      },
      { title: "房间号", dataIndex: "floor", key: "floor", search: false },
      { title: "经度", dataIndex: "lng", key: "lng", search: false },
      { title: "纬度", dataIndex: "lat", key: "lat", search: false },
      {
        title: "详细地址",
        dataIndex: "remark",
        key: "remark",
        valueType: "textarea",
        colProps: {
          span: 24,
        },
        search: false,
      },
      {
        title: "绑定人员",
        dataIndex: "device_minis",
        key: "device_minis",
        hideInForm: true,
        colProps: {
          span: 24,
        },
        search: false,
        render: (_, { device_minis }) => {
          return device_minis?.length===0?0: <Popover  content={<div className="columns">
            <b style={{marginBottom:4,display:"block"}}>微信昵称</b>
            {
              device_minis?.map?.((item, index) => (
                <div key={index}>{item.nick_name}</div>
              ))
            }
          </div>}>
            {device_minis?.length}
          </Popover>
        }
      },
      {
        title: '二维码',
        valueType: 'option',
        width: 88,
        render: (text, record) => (
          <Space size="middle" className='noinner'>
            <Popover arrow={false} destroyTooltipOnHide={false} content={<div className='center columns'>
              <div id={record.id + "s"} style={{ width: 128, height: 128 }} />
              <small style={{ textAlign: "center", opacity: 0.5, marginTop: 10 }}>右键复制二维码图片</small>
            </div>} placement="bottomLeft" onOpenChange={(open) => {
              if (open) {
                setTimeout(() => {
                  const qrdom = document.getElementById(record.id + "s");
                  qrCode.append(qrdom);
                  qrCode.update({
                    data: record.code,
                  });
                }, 300);
              }
            }}>
              <div className="sorts" style={{ cursor: "pointer" }}>
                <QrcodeOutlined style={{ fontSize: 18, color: "#4267b2" }} />
              </div>
            </Popover>
          </Space>
        ),
      }
    ],
    pathconfig: {
      enableadd: true,
      enableedit: true,
      enabledelete: true,
      enabledetail: true,
      add: "/device",
      edit: "/device",
      list: "/device",
      delete: "/device",
      detail: "",
    },
  };
}
export default getcolumns;
